<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯js超酷消息提示框插件notice.js|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" href="dist/noticejs.css" />
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯js超酷消息提示框插件notice.js <span>Javascript notification library</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Tooltips/201801204941.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container">
			<div class="row">
				<div class="col-md-12" style="margin-top:50px;">
					<p>点击下面的按钮来查看消息框效果。</p>
					<p>显示在顶部</p>
					<div class="btn-group" role="group">
					  <button type="button" class="btn btn-default" id="btn1">topLeft</button>
					  <button type="button" class="btn btn-default" id="btn2">topCenter</button>
					  <button type="button" class="btn btn-default" id="btn3">topRight</button>
					</div>
				</div>
				
				<div class="col-md-12" style="margin-top:30px;">
					<p>显示在中间</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-info" id="btn4">middleLeft</button>
						  <button type="button" class="btn btn-info" id="btn5">middleCenter</button>
						  <button type="button" class="btn btn-info" id="btn6">middleRight</button>
					</div>
				</div>
				
				<div class="col-md-12" style="margin-top:30px;">
					<p>显示在底部</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-success" id="btn7">bottomLeft</button>
						  <button type="button" class="btn btn-success" id="btn8">bottomCenter</button>
						  <button type="button" class="btn btn-success" id="btn9">bottomRight</button>
					</div>
				</div>
			</div>
			
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201801054915.html">
			  <img src="related/1.jpg" width="300" alt="js toast消息提示通知插件spop.js"/>
			  <h3>js toast消息提示通知插件spop.js</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201611204207.html">
			  <img src="related/2.jpg" width="300" alt="纯js跨浏览器响应式消息通知插件"/>
			  <h3>纯js跨浏览器响应式消息通知插件</h3>
			</a>
		</div>
	</div>
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="dist/notice.js"></script>
	<script type="text/javascript">
		$("#btn1").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topLeft',
			}).show();
		});

		$("#btn2").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topCenter',
			    animation: {
			        open: 'animated bounceInRight',
			        close: 'animated bounceOutLeft'
			    }
			}).show();
		});

		$("#btn3").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'topRight',
			    animation: {
			        open: 'animated bounceIn',
			        close: 'animated bounceOut'
			    }
			}).show();
		});

		$("#btn4").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleLeft',
			    animation: {
			        open: 'animated fadeIn',
			        close: 'animated fadeOut'
			    }
			}).show();
		});

		$("#btn5").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleCenter',
			    animation: {
			        open: 'animated lightSpeedIn',
			        close: 'animated lightSpeedOut'
			    }
			}).show();
		});

		$("#btn6").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'middleRight',
			    animation: {
			        open: 'animated zoomIn',
			        close: 'animated zoomOut'
			    }
			}).show();
		});

		$("#btn7").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomLeft',
			    animation: {
			        open: 'animated flipInX',
			        close: 'animated flipOutX'
			    }
			}).show();
		});

		$("#btn8").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomCenter',
			    animation: {
			        open: 'animated rollIn',
			        close: 'animated rollOut'
			    }
			}).show();
		});

		$("#btn9").click(function(){
			new NoticeJs({
			    text: 'Notification message',
			    position: 'bottomRight',
			    animation: {
			        open: 'animated bounceIn',
			        close: 'animated bounceOut'
			    }
			}).show();
		});
		
	</script>
</body>
</html>